<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TAROT</title>
    <link rel="stylesheet" href="./css/normal.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/daily.css">
    <script src="./js/vue@2.js"></script>
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
</head>

<body>
    <div id="app" v-cloak>
        <t-header></t-header>

        <main class="container">
            <section>
                <div class="top">
                    <div>
                        <h1>Daily Tarot</h1>
                        <h1>Reading</h1>
                    </div>
                    <p>Explore today's energy and receive personalized tarot guidance. Updated daily, bringing you
                        insights and inspiration for your day.</p>
                </div>
            </section>
            <div class="input" v-if="!show">
                <div class="input-controll">
                    <span>Your Name</span>
                    <input type="text" placeholder="Please enter your name">
                </div>

                <div class="input-submit" v-if="loading">
                    <img src="./imgs/loading.svg" alt="loading" width="40">
                </div>
                <div class="input-submit" v-else @click="handleExtractCard">
                    <span>Get Today's Reading</span>
                </div>
                <p class="input-tips" v-if="already">You've already received today's reading. Come back tomorrow for new
                    guidance!</p>
            </div>
            <div class="daily" v-else>
                <div class="daily-card">
                    <img class="daily-card-img" :src="detail.url" :alt="detail.cardName">
                </div>
                <span class="daily-card-name">{{detail.cardName}}</span>
                <p v-html="detail.cardContent"></p>
                <div class="input-submit">
                    Explore Other Tarot Practices
                </div>
            </div>

            <section>
                <div class="guide">
                    <h1>Daily Tarot Reading Guide</h1>
                    <p>Discover daily guidance and insights through your personal tarot journey.</p>
                </div>
                <div class="guide-wrapper">
                    <div class="guide-main" v-for="item in guide" :key="item.id">
                        <div class="guide-main-title">
                            <div class="guide-index">
                                <span>{{item.id}}</span>
                            </div>
                            <h2>{{item.title}}</h2>
                        </div>
                        <div class="guide-main-title-content">
                            <p>{{item.desc}}</p>
                            <ul>
                                <li v-for="tip in item.tips">
                                    {{tip}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <t-footer></t-footer>
    </div>
</body>
<script src="./main.js"></script>
<script type="module">
    import { header, footer } from './components/index.js'
    import { daily } from './js/cardMeanings.js'
    var vm = new Vue({
        el: '#app',
        components: {
            tHeader: header,
            tFooter: footer
        },
        data() {
            return {
                show: false,
                detail: daily[0],
                already: false,
                loading: false,
                guide: [
                    {
                        id: 1,
                        title: 'Preparing for Your Daily Reading',
                        desc: 'Start your day with intention and create a sacred space for your daily tarot practice. Choose a quiet time, ideally in the morning, when your mind is clear and receptive.',
                        tips: [
                            `Find a peaceful spot where you won't be disturbed`,
                            `Clear your space physically and energetically`,
                            `Have your tarot journal and pen ready`
                        ]
                    },
                    {
                        id: 2,
                        title: 'Centering and Setting Intention',
                        desc: 'Before drawing your cards, take a moment to center yourself and connect with your intuition. This helps create a meaningful and focused reading experience.',
                        tips: [
                            `Take three deep breaths to ground yourself`,
                            `Set a clear intention for your reading`,
                            `Focus on what guidance you seek for the day`
                        ]
                    },
                    {
                        id: 3,
                        title: 'Drawing Your Daily Cards',
                        desc: 'For daily guidance, select one to three cards. Keep your question or intention in mind as you shuffle and draw your cards.',
                        tips: [
                            `One card for general daily guidance`,
                            `Two cards for situation and advice`,
                            `Three cards for morning, afternoon, and evening energy`
                        ]
                    },
                    {
                        id: 4,
                        title: 'Interpreting and Journaling',
                        desc: 'Take time to study the cards and record your insights. Pay attention to your initial reactions and any intuitive messages you receive.',
                        tips: [
                            `Write down your first impressions`,
                            `Note the symbols and colors that stand out`,
                            `Consider how the cards relate to your current situation`
                        ]
                    },
                    {
                        id: 5,
                        title: 'Integration and Evening Reflection',
                        desc: `At the end of your day, reflect on how the cards' messages manifested. This practice deepens your understanding and strengthens your connection with the tarot.`,
                        tips: [
                            `Review your morning reading and notes`,
                            `Document how the cards' guidance played out`,
                            `Consider what lessons you can carry forward`
                        ]
                    }
                ]
            }
        },
        created() {

        },
        methods: {
            handleExtractCard() {
                const todayStorage = localStorage.getItem('__sign_and_invited_expired__')
                const today = new Date().toDateString()
                this.already = today === todayStorage
                if (this.already) {
                    return
                }
                this.loading = true
                this.detail = daily[getRandomNumber()]
                localStorage.setItem('__sign_and_invited_expired__', new Date().toDateString())
                setTimeout(() => {
                    this.show = true
                    this.loading = false
                }, 3000);
            }
        }
    })
</script>

</html>